<template>
  <div class="access-statistics-container">
    <h2>访问统计</h2>
    
    <!-- 日期选择器 -->
    <div class="date-filter">
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="fetchData"
      ></el-date-picker>
    </div>
    
    <!-- 数据概览卡片 -->
    <el-row :gutter="20" class="overview-cards">
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="card-content">
            <div class="card-title">总访问量</div>
            <div class="card-value">{{ overviewData.totalVisits }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="card-content">
            <div class="card-title">页面浏览量(PV)</div>
            <div class="card-value">{{ overviewData.pageViews }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="card-content">
            <div class="card-title">独立访客(UV)</div>
            <div class="card-value">{{ overviewData.uniqueVisitors }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="card-content">
            <div class="card-title">平均停留时间</div>
            <div class="card-value">{{ overviewData.avgDuration }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 图表区域 -->
    <el-row :gutter="20" class="chart-area">
      <!-- 访问量趋势图 -->
      <el-col :span="12">
        <el-card shadow="hover">
          <div class="chart-title">访问量趋势</div>
          <div class="chart-container">
            <line-chart :chart-data="visitTrendData" />
          </div>
        </el-card>
      </el-col>
      
      <!-- PV/UV对比图 -->
      <el-col :span="12">
        <el-card shadow="hover">
          <div class="chart-title">PV/UV对比</div>
          <div class="chart-container">
            <bar-chart :chart-data="pvUvComparisonData" />
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 热门论坛排行 -->
    <el-row class="chart-area">
      <el-col :span="24">
        <el-card shadow="hover">
          <div class="chart-title">热门论坛排行</div>
          <div class="chart-container">
            <el-table :data="hotForums" style="width: 100%">
              <el-table-column prop="rank" label="排名" width="80"></el-table-column>
              <el-table-column prop="category" label="疾病分类"></el-table-column>
              <el-table-column prop="disease" label="疾病名称"></el-table-column>
              <el-table-column prop="posts" label="讨论数" width="120"></el-table-column>
              <el-table-column prop="views" label="浏览量" width="120"></el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import LineChart from './charts/LineChart.vue'
import BarChart from './charts/BarChart.vue'

export default {
  name: 'AccessStatistics',
  components: {
    LineChart,
    BarChart
  },
  data() {
    return {
      dateRange: [new Date(new Date().setDate(new Date().getDate() - 30)), new Date()],
      overviewData: {
        totalVisits: 0,
        pageViews: 0,
        uniqueVisitors: 0,
        avgDuration: '0m'
      },
      visitTrendData: {
        dates: [],
        counts: []
      },
      pvUvComparisonData: {
        dates: [],
        pvData: [],
        uvData: []
      },
      hotPages: [],
      hotForums: []  // 添加这行初始化hotForums数组
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.getOverviewData()
      this.getTrendData()
      this.getHotForums()  // 修改这里，将getHotPages改为getHotForums
    },
    getOverviewData() {
      // 模拟API调用
      setTimeout(() => {
        this.overviewData = {
          totalVisits: 12546,
          pageViews: 32589,
          uniqueVisitors: 8562,
          avgDuration: '3m25s'
        }
      }, 500)
    },
    getTrendData() {
      // 模拟API调用
      setTimeout(() => {
        const dates = []
        const visitCounts = []
        const pvData = []
        const uvData = []
        
        for (let i = 0; i < 30; i++) {
          const date = new Date(new Date().setDate(new Date().getDate() - 30 + i))
          dates.push(`${date.getMonth() + 1}/${date.getDate()}`)
          visitCounts.push(Math.floor(Math.random() * 500) + 300)
          pvData.push(Math.floor(Math.random() * 1200) + 800)
          uvData.push(Math.floor(Math.random() * 400) + 200)
        }
        
        this.visitTrendData = {
          dates,
          counts: visitCounts
        }
        
        // 修改这里的数据格式
        this.pvUvComparisonData = {
          labels: dates,
          datasets: [
            {
              name: 'PV',
              data: pvData
            },
            {
              name: 'UV',
              data: uvData
            }
          ]
        }
      }, 500)
    },
    getHotPages() {
      // 模拟API调用
      setTimeout(() => {
        this.hotPages = [
          { rank: 1, pageName: '抑郁症专题', pv: 3256, uv: 1254, avgDuration: '4m12s' },
          { rank: 2, pageName: '焦虑症专题', pv: 2987, uv: 1123, avgDuration: '3m45s' },
          { rank: 3, pageName: '失眠解决方案', pv: 2456, uv: 987, avgDuration: '3m18s' },
          { rank: 4, pageName: '心理健康测试', pv: 2154, uv: 856, avgDuration: '2m56s' },
          { rank: 5, pageName: '专家在线咨询', pv: 1987, uv: 765, avgDuration: '5m23s' }
        ]
      }, 500)
    },  // 这里添加了缺少的逗号
    
    getHotForums() {
      // 模拟API调用
      setTimeout(() => {
        this.hotForums = [
          { rank: 1, category: '癌症', disease: '肺癌', posts: 3256, views: 12540 },
          { rank: 2, category: '慢性病', disease: '高血压', posts: 2987, views: 11230 },
          { rank: 3, category: '罕见病', disease: '白化病', posts: 2456, views: 9870 },
          { rank: 4, category: '慢性病', disease: '类风湿关节炎', posts: 2154, views: 8560 },
          { rank: 5, category: '癌症', disease: '乳腺癌', posts: 1987, views: 7650 },
          { rank: 6, category: '慢性病', disease: '抑郁症', posts: 1854, views: 7450 },
          { rank: 7, category: '慢性病', disease: '流感', posts: 1756, views: 6850 }
        ]
      }, 500)
    }
  }
}
</script>

<style scoped>
.access-statistics-container {
  padding: 20px;
}

h2 {
  margin-bottom: 20px;
  color: #333;
}

.date-filter {
  margin-bottom: 20px;
}

.overview-cards {
  margin-bottom: 20px;
}

.card-content {
  text-align: center;
}

.card-title {
  font-size: 14px;
  color: #999;
  margin-bottom: 10px;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.chart-area {
  margin-bottom: 20px;
}

.chart-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;
}

.chart-container {
  height: 300px;
}
</style>